<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<link rel="stylesheet" href="../includes/styleBase/css/styleBase.css" />
<link rel="stylesheet" href="../includes/styleBase/css/ostable.css" />
<script type="text/javascript" src="../includes/styleBase/js/jquery.js"></script>
<script type="text/javascript" src="../includes/styleBase/js/style.js"></script>
<script>
$(function(){
	initVerticalTab();
});
</script>
</head>
<body>
<div class="titleDiv">
    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="text-align:left;">
        <tr>
            <td class="box_top_left">&nbsp;</td>
            <td class="box_top_center">标签页示例</td>
            <td class="box_top_right">&nbsp;</td>
        </tr>
    </table>
</div>
<div class="contentBox">
    <div id="verticaltab" class="verticaltab" style="height:380px;">
        <ul>
            <li>第一个页签</li>
            <li>第二个页签</li>
            <li>第三个页签</li>							
       </ul>
    </div>
    <div id="verticaltabcontent" class="verticaltab-content" style="height:380px;">
        <div class="tabContent">
			<iframe src="内容页面.html" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
        </div>
        <div class="tabContent">
            第二个页签内容
        </div>
        <div class="tabContent">
            第三个页签内容
        </div>
    </div>
    <div class="buttonArea" id="verticaltabbutton">
        <div><a href="#2010" class="imgButton"><span>按钮区域</span></a></div>
        <div style="display:none;"><a href="#2010" class="imgButton"><span>第二页签按钮</span></a></div>
        <div style="display:none;"><a href="#2010" class="imgButton"><span>第三页签按钮</span></a></div>
    </div>
</div>
</body>
</html>